<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Swiper demo</title>
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.2.0/css/swiper.min.css">
  <link rel="stylesheet" href="./lib/fonts/ali/iconfont.css">
  <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
      min-width: 320px;
    }

    body {
      background-image: url('./lib/images/可用图片/banner_15.jpg');
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .swiper-pagination {
      font-size: 30px;
    }

    .swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: transparent;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    .my_content {
      width: 80%;
      height: 76%;
      background-color: #e6e6e6;
      border-radius: 15px;
      box-shadow: #797b7b 2px 1px 4px 1px;
    }

    .my_content.active {
      transform: scale(1.4);
      background-color: #ccc;
      transition: all cubic-bezier(0.39, 0.575, 0.565, 1) 0.6s;
      border-radius: 0;
    }

    .head_title {
      border-radius: 4px;
      box-shadow: #ccc 0px 0px 1px 3px;
      z-index: 999;
      position: absolute;
      top: 2%;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
      background-color: #fff;
    }

    .clearfix:before,
    .clearfix:after {
      content: "";
      display: table;
    }

    .clearfix:after {
      clear: both;
    }

    .clearfix {
      *zoom: 1;
    }

    .title_link {
      height: 100%;
    }

    .title_link li {
      user-select: none;
      float: left;
      width: 25%;
      padding: 10px;
      font-size: 0.12rem;
      box-sizing: border-box;
      list-style: none;
      border-right: 1px solid #ccc;
      text-align: center;
    }

    .title_link li:last-child {
      border-right: 0;
    }

    .title_link li.active {
      background-color: aqua;
    }

    .content_l,
    .content_r {
      width: 50%;
      height: 100%;
      position: relative;
    }

    .content_l img,
    .content_r img {
      width: 76%;
      height: 70%;
      transition: all 0.4s ease;
    }

    .content_l img.active {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      transition: all 0.4s ease;
    }

    .content_r img.active {
      position: absolute;
      right: 0;
      top: 0;
      width: 100%;
      height: 100%;
      transition: all 0.4s ease;
    }

    .content_l {
      float: left;
    }

    .content_r {
      float: right;
    }

    .interest_h2 {
      margin-bottom: 0;
    }

    .b_site {
      width: 50%;
      height: 80%;
      float: left;
    }

    .b_site img {
      height: 80%;
      width: 40%;
    }

    .b_site ul {
      padding-top: 30px;
      text-align: left;
      line-height: 30px;
    }

    .use_tec {
      transform: translateX(-78px)
    }

    /* 文字特效 */

    .text_action {
      perspective: 1000px;
      position: relative;
      height: 30px;
      line-height: 30px;
    }

    .text_action>span {
      vertical-align: middle;
      width: 2em;
      height: 100%;
      position: relative;
      display: inline-block;
      border: 1px solid rgba(255, 255, 255, 0.356);
    }

    .text_action>span>span {
      position: absolute;
      left: 0;
      opacity: 0;
    }

    .text_action>span>span.isShow {
      top: 0;
      opacity: 1;
      animation: slide-in 0.8s linear;
    }

    .text_action>span>span.isHide {
      animation: slide-out 0.8s linear;
    }


    @keyframes slide-in {
      0% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
      }
      60% {
        opacity: 1;
        -webkit-transform: translateY(20%);
      }
      100% {
        opacity: 1;
        -webkit-transform: translateY(0);
      }
    }

    @keyframes slide-out {
      0% {
        opacity: 1;
        -webkit-transform: translateY(0);
      }
      60% {
        opacity: 0;
        -webkit-transform: translateY(100%);
      }
      100% {
        opacity: 0;
        -webkit-transform: translateY(100%);
      }
    }
  </style>
</head>

<body>
  <div class="head_title">
    <ul class="title_link clearfix">
      <li class="active">
        <span class="iconfont icon-liebiaoxingshi"></span>简历</li>
      <li>
        <span class="iconfont icon-location-color_bookmark-add"></span>博客</li>
      <li>
        <span class="iconfont icon-objects-color_bear"></span>兴趣</li>
      <li>
        <span class="iconfont icon-emoticons-color_devil"></span>证书</li>
    </ul>
  </div>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div data-index="0" class="my_content">
          <h1>沈文彦-jackshen</h1>
          <div class="text_action">专注于
            <span id="wordControl">
              <span class="isShow">技术</span>
              <span >交互</span>
              <span >视觉</span>
              <span >效率</span>
            </span>
            的前端开发工程师</div>
          <h4>点击查看更多。。</h4>
        </div>
      </div>
      <div class="swiper-slide">
        <div data-index="1" class="my_content">
          <h2>基于vue开发的博客</h2>
          <p class="use_tec">使用技术:</p>
          <p>vue</p>
          <p>vue-router</p>
          <p>webpack</p>
          <p>express</p>
          <p>node</p>
          <h4>点击查看更多。。</h4>
        </div>
      </div>
      <div class="swiper-slide">
        <div data-index="2" class="my_content clearfix">
          <h2 class="interest_h2">我的兴趣</h2>
          <div class="b_site">
            <h3>B站ub主</h3>
            <img src="./lib/images/不二神tinの二维码.png" alt="">
          </div>
          <div class="b_site">
            <ul>
              <li>
                <span>*</span>喜欢研究电脑技术,曾折腾过黑苹果,路由器等</li>
              <li>
                <span>*</span>喜欢研究视频剪辑</li>
              <li>
                <span>*</span>喜欢唱歌</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div data-index="3" class="my_content clearfix">
          <div class="content_l">
            <h3>6级证书</h3>
            <img src="./lib/images/沈文彦6级.png" alt="">
          </div>
          <div class="content_r">
            <h3>学籍证明</h3>
            <img src="./lib/images/20180410061856305.png" alt="">
          </div>
        </div>
      </div>


    </div>
    <!-- 添加跳转箭头 -->
    <!-- <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div> -->
  </div>
  <!-- 页数 -->
  <div class="swiper-pagination"></div>

  <!-- Swiper JS -->
  <script src="https://cdn.bootcss.com/Swiper/4.2.0/js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    // rem适配
    ;
    (function () {
      function adapt(designWidth, rem2px) {

        var d = window.document.createElement('div');

        d.style.width = '1rem';

        d.style.display = "none";

        var head = window.document.getElementsByTagName('head')[0];

        head.appendChild(d);

        var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));

        d.remove();

        document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 +
          '%';

        var st = document.createElement('style');

        var portrait = "@media screen and (min-width: " + window.innerWidth + "px) {html{font-size:" + ((window.innerWidth /
          (designWidth / rem2px) / defaultFontSize) * 100) + "%;}}";

        var landscape = "@media screen and (min-width: " + window.innerHeight + "px) {html{font-size:" + ((window.innerHeight /
          (designWidth / rem2px) / defaultFontSize) * 100) + "%;}}"

        st.innerHTML = portrait + landscape;

        head.appendChild(st);

        return defaultFontSize

      };
      var defaultFontSize = adapt(640, 100);
      window.onresize = function () {
        adapt(640, 100);
      }
      //rem适配结束

      var mySwiper = new Swiper('.swiper-container', {
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction',
        },
        // autoplay: {
        //   delay: 5000,
        //   stopOnLastSlide: true,
        //   disableOnInteraction: true,
        // }
        // ,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        on: {
          transitionEnd: function (swiper) {
            //切换导航
            $('.title_link li').eq(mySwiper.activeIndex).addClass('active').siblings().removeClass('active')
          },
        }
      });
      // 点击导航栏切换
      $('.title_link li').on('click', function () {
        var index = $(this).index();
        mySwiper.slideTo(index, 1000, false);
      })

      // 切换栏逻辑
      $('.my_content').on('click', function () {
        var _this = $(this);
        var index = _this.data('index')
        if (index !== 3 && index !== 2) {
          $('.head_title').hide('400');
          _this.addClass('active');
          if (index == 0) {
            setTimeout(function () {
              _this.removeClass('active');
              // $('.head_title').show();
              //这里必须写成下面的形式,不然有一定几率title导航不显示
              $('.head_title').show('normal', function () {});
              window.open('/jianli')
            }, 400)
          }
          if (index == 1) {
            setTimeout(function () {
              _this.removeClass('active');
              // $('.head_title').show();
              //这里必须写成下面的形式,不然有一定几率title导航不显示
              $('.head_title').show('normal', function () {});
              window.open('/load')
            }, 400)
          }
        }

      })
      //切换逻辑结束
      $('.content_l img').on('click', function () {
        $(this).toggleClass('active')
      })
      $('.content_r img').on('click', function () {
        $(this).toggleClass('active')
      })

      //文字特效逻辑
      //判断是否为最后一个
      /**params
        $word -- jq元素
      **/
      function takeNext($word) {
        return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
      }
      
      function switchWord($oldWord, $newWord) {
        $oldWord.removeClass('isShow').addClass('isHide');
        $newWord.removeClass('isHide').addClass('isShow');
      }
      function hideWord($word){
        var nextWord = takeNext($word)
        switchWord($word, nextWord);
			setTimeout(function(){ hideWord(nextWord) }, 1600);
      }

    hideWord($('.isShow'))

    })()
  </script>
</body>

</html>